<!--
 * @Description: 数据驱动
 * @Author: zzj
 * @Date: 2021-09-18 10:01:26
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-20 18:20:14
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据驱动</title>
</head>
<body>
    <div id="container"></div>
    <div id="msg"></div>
    <button onclick="click()">修改msg</button>
    <script>
            //  每隔1s，time显示，
    let data = {
      time :new Date().toLocaleString(),
      msg: 'hello',
      _time:'',
      _msg:''
    }
    setInterval(() => {
      data.time = new Date().toLocaleString();
    }, 1000);

    function clickHandler(){
      data.msg = "hello world";
    }
    //-------------vue框架--------------------
      // 默认值
    data._time = data.time;
    data._msg = data.msg;
    Object.defineProperty(data,'time',{
      configurable:true,
      set(val){
        this._time = val;
        render();
      },
      get(){
        return this._time;
      }
    })
    Object.defineProperty(data,'msg',{
      configurable:true,
      set(val){
        this._msg = val;
        render();
      },
      get(){
        return this._msg;
      }
    })

    //-----------------------
  

    // dom操作  vue/react = Diff算法
    function render(){
      $dom = document.getElementById('container')
      $dom.style.color = "pink"
      $dom.innerText = data.time;

      $msg = document.getElementById('msg')
      $msg.innerText = data.msg;
    }
    render();
    </script>
</body>
</html>